<template>
  <div>
    <header class="header">
      <h1>小黑记事本</h1>
      <!-- 指令的修饰符 .trim  .number -->
      <input placeholder="请输入任务" v-model.trim="msg" class="new-todo" />
      <button class="add" v-on:click="add">添加任务</button>
    </header>
  </div>
</template>

<script>
export default {
  // data为什么必须是一个函数返回一个对象
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    add() {
      // 因为这里header组件 没有list。我们想着是 this.list.push({xxxx})
      // 没有list怎么添加？--- 想 --哪里有list数据---- 父组件有list
      // 子组件去通知父组件，去修改。  子组件只能修改自己的数据，不能改别人的
      console.log(this.msg);
      // 事件名称随便写，但是要有一定的规范，一般的公司会有统一规范
      // 写的这命令，先全局搜索以下 那么些地方用了 $emit。 模仿之前的同事代码去写
      // 你帮我看一下，我参考你的代码去写的，但是没有生效，那个是什么原因
      if(!this.msg) return   // 这种代码就是工作里面的代码，判断条件。先写假值，在return
      this.$emit('addEVENT', this.msg)
      // 添加成功以后，情况输入框
      this.msg = ''
    }
  }
}
</script>